import React from "react";
import bg from "./login.png";
import { Tabs, Toast } from "antd-mobile";
import styles from "./index.module.css";
import { Form, Input, Button } from "antd-mobile";
import http from "../../api/http";
import { useNavigate } from "react-router-dom";
function Index() {
  const  navigate=useNavigate()
  const onFinish=async(value)=>{
    const res=await http.post("/api/login",value)
    const {code,data,message}=res.data
    console.log(res)
    if(code===200){
      localStorage.setItem("token",data.token)
      localStorage.setItem("userInfo",data.data.userInfo)
      navigate("/")
      Toast.show({
        content:message,
        icon:"登录成功"
      })
    }else{
      Toast.show({
        content:message,
        icon:"fail"
      })
    }
  }
  return (
    <div className={styles.logp}>
      <h4>登录即可享更多权益</h4>
      <Tabs>
        <Tabs.Tab title="扫码登录" key="fruits">
          <img src={bg} alt="" />
        </Tabs.Tab>
        <Tabs.Tab title="账号密码登录" key="vegetables">
          <Form
            layout="horizontal"
            onFinish={onFinish}
            footer={
              <Button block type="submit" color="primary" size="large">
                提交
              </Button>
            }
          >
            <Form.Header>水平布局表单</Form.Header>

            <Form.Item
              name="username"
              label="用户名"
              rules={[{ required: true, message: "姓名不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入姓名" />
            </Form.Item>

            <Form.Item
              name="password"
              label="手机号"
              rules={[{ required: true, message: "手机号不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入手机号" />
            </Form.Item>
        
          </Form>
        </Tabs.Tab>
        <Tabs.Tab title="手机号登录" key="animals">
          手机号登录
        </Tabs.Tab>
      </Tabs>
    </div>
  );
}

export default Index;
